<template>
    <section>
        <div class="container">
            <div class="container-title">轮播图列表</div>
            <div class="container-body pd">
                <el-button
                    class="btnwarning"
                    type="primary"
                    size="mini"
                    style="marginBottom:10px"
                    @click="addNewPop = true"
                >新增轮播图</el-button>
                <el-table
                    :data="carouselList"
                    border
                    style="width: 100%"
                    >

                    <el-table-column
                        prop="carouselImgUrl"
                        label="缩略图Url"
                        align="center"
                    >
                        <template slot-scope="scope">
                        <el-image
                            style="width: auto; height: 40px"
                            :src="scope.row.carouselImgUrl"
                            :preview-src-list="[scope.row.carouselImgUrl]"
                        >
                        </el-image>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="150">
                        <template slot-scope="scope">
                        <el-button
                            class="btnwarning"
                            type="warning"
                            size="mini"
                            @click="handleEdit(scope.$index, scope.row)"
                            >编辑</el-button
                        >
                        <el-button
                            class="btnwarning"
                            type="danger"
                            size="mini"
                            @click="delCarouse(scope.$index, scope.row)"
                            >删除</el-button
                        >
                        </template>
                    </el-table-column>
                </el-table>
            </div>
        </div>
    <div class="pageBox">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        @current-change="currentPage"
      >
      </el-pagination>
      <div class="clear"></div>
    </div>
          <!-- 新增商品分类弹窗 -->
    <el-dialog
        :title="editID? '编辑轮播图' :'新增轮播图'"
        :visible.sync="addNewPop"
        width="30%"
        @close="colsePop"
        center
        >
      <el-form
        ref="newThemeForm"
        label-width="120px"
        class="demo-newThemeForm"
        size="small"
      >
        <el-form-item label="轮播图片" >
          <uploadImg :showImgUrl="carouselImgUrl" @setImg="setImg" fiedName="carouselImgUrl"/>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="colsePop" size="small"
          >取 消</el-button
        >
        <el-button
          type="primary"
          @click="
            editID ? setCarouse() : postCarouse()
          "
          size="small"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- <el-dialog title="删除提示" :visible.sync="showDelCim" width="30%">
      <span>确认删除改轮播图？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="showDelCim = false">取 消</el-button>
        <el-button type="primary" @click="delCarouse">确 定</el-button>
      </span>
    </el-dialog> -->
    </section>

</template>

<script>
import uploadImg from "@/components/uploadImg";
export default {
    data() {
        return {
            addNewPop: false,
            total: 0,
            editID: '',
            carouselList: [],
            carouselImgUrl: '',
            page: 1,
        }
    },
    components: {
        uploadImg
    },
    created(){
        this.getCarouseList()
    },
    methods: {
        currentPage(page) {
          this.page = page;
          this.getCarouseList();
        },
        colsePop(){
            this.editID = ''
            this.carouselImgUrl = ''
            this.addNewPop = false
        },
        setImg(data){
            this.carouselImgUrl =  data.imageUrl;
        },
        handleEdit(index, row){
            this.editID = row.id
            this.carouselImgUrl = row.carouselImgUrl
            this.addNewPop = true
        },
        async setCarouse(){
            let res = await this.$store.dispatch("setCarouse", {
                id: this.editID,
                carouselImgUrl: this.carouselImgUrl
            });
            if (res.success) {
                this.getCarouseList()
                this.colsePop()
                this.$message({
                    type: "success",
                    message: "修改成功!",
                });
            } else {
              this.$message.error(res.ErrorMessage || '网络异常');
            }
        },
        async delCarouse(index, row){
          let res = await this.$store.dispatch("delCarouse", {
              id: row.id
          });
          if (res.success) {
              this.getCarouseList()
              this.$message({
                  type: "success",
                  message: "删除成功!",
              });
          } else {
        this.$message.error(res.ErrorMessage || '网络异常');
      }
        },
        async postCarouse(){
             let res = await this.$store.dispatch("postCarouse", {
                carouselImgUrl: this.carouselImgUrl
            });
            if (res.success) {
                this.getCarouseList()
                this.colsePop()
                this.$message({
                    type: "success",
                    message: "新增成功!",
                });
            } else {
              this.$message.error(res.ErrorMessage || '网络异常');
            }
        },
        async getCarouseList(){
            let skip = (this.page - 1) * 10;
            let res = await this.$store.dispatch("getCarouseList", {
                skip,
            });
            if (res.success) {
                this.carouselList = res.data || [];
                this.total = res.data.totalCount;
            } else {
              this.$message.error(res.ErrorMessage || '网络异常');
            }
        }
    }
}
</script>

<style lang="scss" scoped>
.btnwarning{
    color: #ffffff;
}
</style>
